<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <link href="../../../static/css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../../../static/js/jquery.js"></script>
    <script type="text/javascript" src="../../../static/js/dateformate.js"></script>
    <script>
        window.datas = {
            brandTypeProductInfo: [],
        }
        //改变订单详情序号
        function changeserial(){
            $(".serial").each((index,item)=>{
                $(item).text(index+1);
            })
        }
        //选择单个时
        function singleCheck(){
            if($(".singlecheck:checked").length==$(".singlecheck").length){
                $("#checkAll").prop("checked",true);
            }else {
                $("#checkAll").prop("checked",false);
            }
        }
        //获取品牌商品信息
        function getbrandTypeProductInfo() {
            $.ajax({
                url: "/brandTypeProduct",
                type: "get",
                dataType: "json",
                success: (data) => {
                    window.datas.brandTypeProductInfo = data.data;
                    //初始化订单详情
                    adddetail();
                }
            })
        }
        //添加订单详情信息时
        function adddetail(){
            $("#orderDetailForm").append(` <tr>
            <td><input type="checkbox" class="singlecheck" onchange="singleCheck()"></td>
            <td class="serial"></td>
            <td>
                <select class="brandId" onchange="brandChange(this)">
                    <option>请选择</option>
                </select>
            </td>
            <td>
                <select class="typeId" onchange="typeChange(this)">
                    <option>请选择</option>
                </select>
            </td>
            <td>
                <select class="productId" onchange="productChange(this)">
                    <option>请选择</option>
                </select>
            </td>
            <td><input type="number" value="1" class="purchaseNum" onblur="caculateDetailTotal(this)"/></td>
            <td class="productUnit"></td>
            <td><input class="productPrice" disabled type="text"/></td>
            <td><input type="text" class="orderDetailTotal"/></td>
        </tr>`)
           datas.brandTypeProductInfo.forEach((item,index)=>{
               $(".brandId").last().append(`
               <option value="${item.brandId}">${item.brandName}</option>`)
           })
            changeserial();
        }
        //选择品牌后
        function brandChange(target){
            let brandTypeProductInfo=datas.brandTypeProductInfo;
            let type=[];
            let id=$(target).find("option:selected").val();
            for (let i = 0;i< brandTypeProductInfo.length; i++) {
                if(brandTypeProductInfo[i].brandId==id){
                    type=brandTypeProductInfo[i].types;
                    break;
                }
            }
            datas.types=type;
            $(target).parents("tr").find(".typeId").html('<option value="">请选择</option>')
            type.forEach((item,index)=>{
                $(target).parents("tr").find(".typeId").append(`<option value="${item.typeId}">${item.typeName}</option>`);
            })
        }
        //选择类型后
        function typeChange(target){
            let types=datas.types;
            let product=[];
            let id=$(target).find("option:selected").val();
            for (let i = 0;i< types.length; i++) {
                if(types[i].typeId==id){
                    product=types[i].products;
                    break;
                }

            }
            datas.products=product;
            $(target).parents("tr").find(".productId").html('<option value="">请选择</option>')
            product.forEach((item,index)=>{
                $(target).parents("tr").find(".productId").append(`<option value="${item.productId}">${item.productModel}</option>`);
            })
        }
        //选择产品型号后
        function productChange(target){
            let products=datas.products;
            let product={};
            let id=$(target).find("option:selected").val();
            for (let i = 0;i< products.length; i++) {
                if(products[i].productId==id){
                    product=products[i];
                    break;
                }
            }
            $(target).parents("tr").find(".productUnit").text(product.productUnit);
            $(target).parents("tr").find(".productPrice").val(product.productPrice);
            caculateDetailTotal(target);
        }
        //删除选中订单详情
        function deleteDetail(){
            $(".singlecheck:checked").parents("tr").remove();
            if($(".singlecheck").length==0){
                adddetail();
                $("#checkAll").prop("checked",false);
            }
            caculateOrderTotal();
        }
        //计算单个详情总价
        function caculateDetailTotal(target){
            let tr=$(target).parents("tr");
            let price=tr.find(".productPrice").val();
            let num=tr.find(".purchaseNum").val();
            if(num<=0){
                tr.find(".purchaseNum").val(1);
                num=1
            }
            tr.find(".orderDetailTotal").val(price*num);
            //计算单个后计总
            caculateOrderTotal()
        }
        //计算整个订单总额
        function caculateOrderTotal(){
            let count=0;
            $(".orderDetailTotal").each((index,item)=>{
                count+=parseInt($(item).val());
            })
            $(".ordermoney").val(count);
        }
        //校验填写信息
        function checkOrderInfo(){
            $(".orderDetailTotal").each((index,item)=>{
                if($(item).val()<=0){
                    alert("订单详情未填写");
                    return false;
                }
            })
            if($(".customName").val()==''){
                alert("请输入客户名字");
                return false
            }
            return true;
        }
        //获取参数
        function getParam(){
            datas.OrderInfo={
                orderid:$(".orderid").val(),
                customName:$(".customName").val(),
                ordertime:$(".ordertime").val(),
                operatorid:JSON.parse(localStorage.getItem("user")).uid,
                status:$(".status").val(),
                ordermoney:$(".ordermoney").val(),
                orderdetails:[],
            }
            $("#orderDetailForm").children("tr").each((index,item)=>{
                datas.OrderInfo.orderdetails.push({
                    purchaseNum:$(item).find(".purchaseNum").val(),
                    productId:$(item).find(".productId option:selected").val(),
                    proprice:$(item).find(".productPrice").val(),
                    prototal:$(item).find(".orderDetailTotal").val(),
                    orderId: datas.OrderInfo.orderid
                })
            })
        }
        //保存信息
        function saveOrder(){
            if(checkOrderInfo()){
                getParam();
                $.ajax({
                    url: "/marketOrders/addOrders",
                    type: "post",
                    dataType: "json",
                    contentType: "application/json;charset=utf8",
                    data: JSON.stringify(datas.OrderInfo),
                    success:(data)=>{
                        if(data.status==200){
                            alert(data.msg);
                            location.href="findPageAll";
                        }else {
                            alert(data.msg);
                        }
                    }
                });
            }
        }
        $(() => {
            //创建订单初始数据
            $(".orderid").val("DJ" + new Date().getTime());
            $(".operatorName").val(JSON.parse(localStorage.getItem("user")).uname);
            $(".ordertime").val(new Date().Format("yyyy-MM-dd HH:mm:ss"));
            //获取商品信息
            getbrandTypeProductInfo();
            $("#checkAll").change(function(){
                if($(this).is(':checked')){
                    $(".singlecheck").prop("checked",true);
                }else {
                    $(".singlecheck").prop("checked",false);
                }
            })

        })
    </script>
</head>

<body>
<div class="place"><span>位置：</span>
    <ul class="placeul">
        <li>营销管理</li>
        <li>订购单管理</li>
        <li>添加</li>
    </ul>
</div>
<div class="formbody">
    <div class="formtitle"><span>订购单信息</span></div>
    <ul class="forminfo">
        <li>
            <label>订单编号</label>
            <input name="" type="text" readonly="readonly" class="roinput orderid"/>
            <i>自动生成不能编辑</i>
        </li>
        <li>
            <label>客户姓名</label>
            <input name="" type="text" class="dfinput customName"/>
            <i>不能为空</i>
        </li>
        <li>
            <label>订购时间</label>
            <input name="" type="text" readonly="readonly" class="roinput ordertime"/>
            <i>不能编辑</i>
        </li>
        <li>
            <label>创建人</label>
            <input name="" type="text" value="" readonly="readonly" class="roinput operatorName"/>
            <i>不能编辑</i>
        </li>
        <li>
            <label>审核状态</label>
            <input type="text" value="未审核" readonly="readonly" class="roinput"/>
            <input name="" class="status" type="hidden" value="1"/>
            <i>初始状态，不能编辑</i>
        </li>
        <li>
            <label>总金额</label>
            <input name="" type="text" value="0" readonly="readonly" class="roinput ordermoney"/>
            <i>自动运算，不能编辑</i>
        </li>
        <li>
            <input type="button" value="新增" onclick="adddetail()" class="smallbtn"/>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" value="删除" onclick="deleteDetail()" class="smallbtn"/>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" value="保存" onclick="saveOrder()" class="smallbtn"/>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" value="返回" class="smallbtn" onclick="window.location.href='findPageAll'"/>
        </li>
    </ul>
    <table class="tablelist">
        <thead>
        <tr>
            <th><input type="checkbox" id="checkAll"/></th>
            <th>序号</th>
            <th>品牌</th>
            <th>类型</th>
            <th>型号</th>
            <th>数量</th>
            <th>单位</th>
            <th>单价</th>
            <th>金额</th>
        </tr>
        </thead>
        <tbody id="orderDetailForm">

        </tbody>
    </table>
</div>
<script type="text/javascript">
    $('.tablelist tbody tr:odd').addClass('odd');
</script>
</body>
</html>
